.Point_wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transform-style: preserve-3d;
  perspective: 900px;
  .bg_img {
    display: none;
    width: 46px;
    height: 46px;
    position: absolute;
    top: -15%;
  }
  .markerIcons {
    width:0;
    height:0;
    border:36px solid;
    border-bottom:none;
    position: relative;
    margin-left: -20px;
    .common1 {
      width:0;
      height:0;
      border:22px solid;
      border-bottom:none;
    }
    .common2 {
      width:0;
      height:0;
      border:12px solid;
      border-bottom:none;
    }
    .common3 {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .common4{
      position: absolute;
      top: -19px;
      left: 50%;
      transform: translate(-50%,-50%);
    }
    .lv12 {
      @extend .common1;
      @extend .common3;
      @extend .common4;
      border-color: rgba(255,199,199,.5) transparent transparent transparent;
      .lv13 {
        @extend .common2;
        @extend .common4;
        top: -12px;
        border-color: rgba(255,199,199,.5) transparent transparent transparent;
      }
    }
    .lv22 {
      @extend .common1;
      @extend .common3;
      @extend .common4;
      border-color: rgba(232,106,106, 0.5) transparent transparent transparent;
      .lv23 {
        @extend .common2;
        @extend .common4;
        top: -12px;
        border-color: rgb(232,106,106) transparent transparent transparent;
      }
    }
    .lv32 {
      @extend .common1;
      @extend .common3;
      @extend .common4;
      border-color: rgba(215,48,48, 0.5) transparent transparent transparent;
      .lv33 {
        @extend .common2;
        @extend .common4;
        top: -12px;
        border-color: rgb(215,48,48) transparent transparent transparent;
      }
    }
    .lv42 {
      @extend .common1;
      @extend .common3;
      @extend .common4;
      border-color: rgba(181,11,11, 0.5) transparent transparent transparent;
      .lv43 {
        @extend .common2;
        @extend .common4;
        top: -12px;
        border-color: rgb(181,11,11) transparent transparent transparent;
      }
    }
  }
  .markerIcon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    .common1 {
      width: 22px;
      height: 22px;
      border-radius: 50%;
    }
    .common2 {
      width: 12px;
      height: 12px;
      border-radius: 50%;
    }
    .common3 {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .lv12 {
      @extend .common1;
      @extend .common3;
      background-color: rgba(255,199,199, 0.5);
      .lv13 {
        @extend .common2;
        background-color: rgb(255,199,199);
      }
    }
    .lv22 {
      @extend .common1;
      @extend .common3;
      background-color: rgba(232,106,106, 0.5);
      .lv23 {
        @extend .common2;
        background-color: rgb(232,106,106);
      }
    }
    .lv32 {
      @extend .common1;
      @extend .common3;
      background-color: rgba(215,48,48, 0.5);
      .lv33 {
        @extend .common2;
        background-color: rgb(215,48,48);
      }
    }
    .lv42 {
      @extend .common1;
      @extend .common3;
      background-color: rgba(181,11,11, 0.5);
      .lv43 {
        @extend .common2;
        background-color: rgb(181,11,11);
      }
    }
  }
  .markerIcon3 {
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    .common1 {
      width: 22px;
      height: 22px;
    }
    .common2 {
      width: 12px;
      height: 12px;
    }
    .common3 {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .lv12 {
      @extend .common1;
      @extend .common3;
      background-color: rgba(30, 255, 210, 0.5);
      .lv13 {
        @extend .common2;
        background-color: rgb(30, 255, 210);
      }
    }
    .lv22 {
      @extend .common1;
      @extend .common3;
      background-color: rgba(30, 194, 255, 0.5);
      .lv23 {
        @extend .common2;
        background-color: rgb(30, 194, 255);
      }
    }
    .lv32 {
      @extend .common1;
      @extend .common3;
      background-color: rgba(255, 91, 105, 0.5);
      .lv33 {
        @extend .common2;
        background-color: rgb(255, 91, 105);
      }
    }
    .lv42 {
      @extend .common1;
      @extend .common3;
      background-color: rgba(255, 170, 0, 0.5);
      .lv43 {
        @extend .common2;
        background-color: rgb(255, 170, 0);
      }
    }
  }
  .lv11{
    background:rgba(255,199,199,.2);
  }
  .lv21{
    background:rgba(232,106,106,.2);
  }
  .lv31{
    background:rgba(215,48,48,.2);
  }
  .lv41{
    background:rgba(181,11,11,.2);
  }

  .lv11s{
    border-color: rgba(255,199,199,.2) transparent transparent transparent;
  }
  .lv21s{
    border-color: rgba(232,106,106,.2) transparent transparent transparent;
  }
  .lv31s{
    border-color: rgba(215,48,48,.2) transparent transparent transparent;
  }
  .lv41s{
    border-color: rgba(181,11,11,.2) transparent transparent transparent;
  }

  .lv11s1{
    border-color: rgba(30, 255, 210,.2) transparent transparent transparent;
  }
  .lv21s1{
    border-color: rgba(30, 194, 255,.2) transparent transparent transparent;
  }
  .lv31s1{
    border-color: rgba(255, 91, 105,.2) transparent transparent transparent;
  }
  .lv41s1{
    border-color: rgba(255, 170, 0,.2) transparent transparent transparent;
  }
  .min-Tips {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 0px;
    border: 1px solid rgba(39,45,55, 1);
    background-color: rgba(39,45,55, 0.8);
    box-shadow: 0 0 6px #09dadc inset;
    border-radius: 2px;
    color: #ffffff;
    font-size: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    visibility: hidden;
    transition: all 0.3s;
    a {
      display: block;
      width: 120px;
      line-height: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

/* 弹窗 */
.minPopup {
  width: 394px;
  height: 330px;
  padding: 22px 16px 16px;
  box-sizing: border-box;
  background: url('~@/assets/images/common/popup_bg.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  .titles{
    color: #fff;
    text-shadow: 0 0 3px rgba(255,198,0, 1);
  }
  #close{
    position: absolute;
    top: 20px;
    right: 14px;
    cursor: pointer;
  }
  .content{
    width: 100%;
    height: 82%;
    padding: 16px;
    box-sizing: border-box;
    margin-top: 12px;
    background: rgba(7, 22, 51, 0.5);
    box-shadow:0 0 4px 1px #272D37;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
    .min_item{
      .cr-hui{
        display: inline-block;
        width: 60px;
      }
    }
    .min_item:nth-of-type(1){
      margin-right: 68px;
    }
    .flex_s{
      width: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      .title-width{
        min-width: 70px;
      }
      .item-width{
        width: 50%;
      }
      .lue{
        width: 256px;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis; 
        display: -webkit-box; 
        -webkit-line-clamp: 2; 
        -webkit-box-orient: vertical; 
      }
    }
    .info{
      padding-bottom: 3px;
      border-bottom: 1px solid #FFC600;
      cursor: pointer;
    }
    .flex_end{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .item_box{
        width: 145px;
        height: 56px;
        box-sizing: border-box;
        padding: 8px 0 8px 12px;
        background-color: #2F3440;
        .symbol{
          position: relative;
          .line-s{
            position: absolute;
            right: 0;
            width: 22px;
            height: 2px;
            background-color: #FFC800;
          }
        }
      }
    }
  }
}